@import "variables";
@import "icons";
@import "animate";
@import "extends";
@import "mixins";
@import "print";
@import "reset";
//
// common
// --------------------------------------------------

html,body{
    height:100%;
}
#print{
    display: none;
}
.color-orange{
    color:$orange!important;
}
.color-blue{
    color:$blue!important;
}
.orange{
    color:$orange;
}
.event-disabled{
    pointer-events:none;
}
.placeholder{
    color:#D1D1D1!important
}
.font-headline{
    @extend %font-headline
}
.font-title{
    @extend %font-title
}
.font-subhead{
    @extend %font-subhead
}
.font-body2{
    @extend %font-body2
}
.font-body1{
    @extend %font-body1
}
.font-caption{
    @extend %font-caption
}
.font-button{
    @extend %font-button
}
.lazyload{
    opacity:1;
    transition:opacity ease .3s;
}
.lazy-box{
    background-color: #fff;
    &:before{
        width:30px;
        height:30px;
        font-size:30px;
        position: absolute;
        top:50%;
        left:50%;
        margin:-15px 0 0 -15px;
    }
    .lazyload{
        opacity:0;
    }
}
// button
.button{
    @extend %font-button;
    display: block;
    // width: 160px;
    text-align:center;
    cursor:pointer;
    height:40px;
    line-height:40px;
    color:#fff;
    background-color: #FFC53D;
    box-shadow:0 2px 2px 0 rgba(0,0,0,0.12);
    border-radius:20px;
    box-sizing:border-box;
    width: 220px;
    margin:0 auto;
    transition:all ease .3s;
    position: relative;
    &:active{
        background-color: darken(#FFC53D,10%);
    }
    &.right{
        text-align: right
    }
    &.purple{
        background:$purple;
        border-color:$purple;
        &:active{
            background-color:darken($purple,10%);
        }
        &.pure{
            color:$purple;
            &:active{
                background-color:transparent;
                color:darken($purple,10%);
            }
        }
        &.transparent{
            color:$purple;
            &:active{
                background-color:rgba(#000, 0.1);
                color:darken($purple,10%);
            }
        }
    }
    &.short{
        width: 92px;
        margin:0;
    }
    &.auto{
        width: auto;
        margin:0;
    }
    &.pure{
        border:none;
        box-shadow:none;
        background: none;
        color:$themeColor;
        &:active{
            background-color:transparent;
            color:darken($themeColor,10%);
        }
    }
    &.pure--black{
        border:none;
        box-shadow:none;
        background: none;
        color:$importColor;
        &:active{
            background-color:transparent;
            color:darken($importColor,10%);
        }
    }
    &.transparent{
        box-shadow:none;
        background: none;
        border:1px solid $themeColor;
        // border-color:#0137A5;
        color:$themeColor;
        &:active{
            color:darken($themeColor,10%);
        }
    }
    &.white{
        box-shadow:none;
        background: none;
        border:1px solid $lightColor;
        // border-color:#0137A5;
        color:$importColor;
        &:active{
            color:darken($importColor,10%);
        }
    }
    &.long{
        width: 100%;
        box-sizing: border-box;
        margin:0;
        &.confirm{
            width: auto;
            margin:24px;
        }
    }
    &.close{
        color:$importColor;
        background-color: transparent;
        border:1px solid $defaultColor;
        &:active{
            border-color:darken($defaultColor,10%);
            color:darken($importColor,10%);
        }
    }
    &.disabled{
        background: $sectionColor;
        border-color:transparent;
        &:active{
            background:darken($sectionColor, 0.1);
            color:darken(#fff,10%);
        }
        pointer-events:none;
    }
}

#app-box{
    width:100%;
    height:100%;
    position:relative;
}
.router {
    position:absolute;
    width:100%;
    height:100%;
    -webkit-overflow-scrolling: touch;
    box-sizing:border-box;
    top:0;
    left:0;
    overflow:auto;
}
.router-inner{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
.sub-router{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.wrapper{
    position:absolute;
    width:100%;
    height:100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    box-sizing:border-box;
    top:0;
    left:0;
}
.fade-enter-active, .fade-leave-active{
    transition: opacity ease 300ms;
}
.fade-enter, .fade-leave-active {
    opacity:0;
}
.fade-fast-enter-active, .fade-fast-leave-active{
    transition: opacity ease 150ms;
}
.fade-fast-enter, .fade-fast-leave-active {
    opacity:0;
}

.down-enter-active, .down-leave-active{
    transition: all ease 200ms;
}
.down-enter, .down-leave-active {
    opacity: 0;
    transform: translate3d(0,-10px,0);
}

.up-enter-active, .up-leave-active{
    transition: all ease 250ms;
}
.up-enter, .up-leave-active {
    opacity: 0;
    transform: translate3d(0,10px,0);
}

.view-enter-active, .view-leave-active{
    transition: all ease 250ms;
}
.view-enter{
    opacity: 0;
    transform: translate3d(0,20px,0);
}
.view-leave-active {
    opacity: 0;
    transform: translate3d(0,-20px,0);
}

.success-enter-active, .success-leave-active{
    transition: all ease 300ms;
}
.success-enter{
    opacity: 0;
    transform: scale(1.3);
}
.success-leave-active {
    opacity: 0;
    transform: scale(0.8);
}

// transition-router
.router-enter-active, .router-leave-active{
    transition: all ease 200ms;
}
.router-enter, .router-leave-active {
    opacity: 0;
}


// transition-router-out
.router-out-enter-active, .router-out-leave-active{
    transition: all ease 300ms;
}
.router-out-enter{
    opacity: 0;
    transform: translate3d(-20px,0,0)
}
.router-out-leave-active {
    opacity: 0;
    transform: translate3d(20px,0,0)
}

// transition-router-in
.router-in-enter-active, .router-in-leave-active{
    transition: all ease 300ms;
}
.router-in-enter{
    opacity: 0;
    transform: translate3d(20px,0,0)
}
.router-in-leave-active {
    opacity: 0;
    transform: translate3d(-20px,0,0)
}


